<template>
	<view style="background-color: #f2f2f2;width: 100%;height: 100%;">
		<view class="header-content flex justify-content-space-between" :style="{paddingTop: statusBarHeight}">
			<view style="width: 100rpx;" @click="onTapLeft"><eui-uicons color="#000" type="back" size="40" /></view>
			<view style="font-size: 18px;font-weight: 600;">个人资料</view>
			<view class="flex justify-content-flex-end" style="width: 100rpx;" @click="EditUserData">
				<view class="iconfont icon-bianji" :style="{color:displayable?'#000':'RGBA(127, 127, 127, 1)'}"></view>
			</view>
		</view>

		<scroll-view scroll-y :style="{width:scrollWidth+'px',height:scrollHeight}">
			<view style="padding: 0 20rpx;">
				<view class="user-img">
					<image :src="personImg" @error="setErrorImg" mode="scaleToFill"
						style="width: 144rpx;height: 144rpx;border-radius: 50%;" class="margin-top-40"></image>
					<view class="font-size-36 margin-top-20">{{Info.c_name}}</view>
				</view>
				<view class="change-title">联系信息</view>
			</view>
			<eui-card class="padding-left-28 margin-top-12" leftPadding="28rpx" topMargin="6px" rightPadding="0px"
				vPadding="0px">
				<eui-card-input v-model="Info.c_mobile_phone" title="手机号" :placeholder="displayable?'':'请输入手机号'"
					type="text" alignType="left" :displayable="displayable" hPadding="0" style="padding-right: 10px;" />
				<eui-card-input v-model="Info.c_phone" title="固定电话" :placeholder="displayable?'':'请输入固定电话'" type="text"
					alignType="left" :displayable="displayable" hPadding="0" style="padding-right: 10px;" />
				<eui-card-input v-model="Info.c_email" title="Email" :placeholder="displayable?'':'请输入邮箱地址'" type="text"
					alignType="left" :displayable="displayable" hPadding="0" style="padding-right: 10px;" />

				<view class="m-card-input-view" style="height: 45px;align-items: center;" v-if="displayable">
					<view class="m-card-input-title m-title-text">地址</view>
					<view class="ellipsis-2" :style="{width:(scrollWidth-132)+'px'}" style="font-size: 14px;">
						{{Info.c_address}}
					</view>
				</view>
				<eui-card-input v-model="Info.c_address" title="地址" :placeholder="displayable?'':'请输入住宅地址'"
					type="textarea" :displayable="displayable" maxlength="60" hPadding="0" :showBottomLine='false'
					style="padding-right: 28rpx;" v-else />
			</eui-card>
			<view style="padding: 0 20rpx;">
				<view class="change-title">默认信息</view>
			</view>
			<eui-card class="padding-left-28 margin-top-12" leftPadding="28rpx" topMargin="6px" rightPadding="0px"
				vPadding="0px">
				<eui-card-input v-model="Info.sStoreName" title="默认机构" :placeholder="displayable?'':'请选择默认机构'"
					type="text" alignType="left" :rightIconType="displayable?'':'right'"
					@iconClick="clickRight('store')" displayable hPadding="0" style="padding-right: 10px;" />
				<eui-card-input v-model="Info.c_adno_name" title="默认部门" :placeholder="displayable?'':'请选择默认部门'"
					type="text" alignType="left" :rightIconType="displayable?'':'right'" @iconClick="clickRight('adno')"
					displayable hPadding="0" style="padding-right: 10px;" />
				<eui-card-input v-model="Info.c_menu_role" title="菜单角色" type="text" alignType="left" displayable
					v-if="displayable" :showBottomLine='false' hPadding="0" style="padding-right: 10px;" />
				<eui-card-input v-model="Info.c_menu_role" title="菜单角色" :range="menuRoleList" type="radio"
					alignType="left" @buttonClick="buttonClickRole" :showBottomLine='false' v-else
					style="padding-right: 10px;" hPadding="0" />
			</eui-card>
			<view style="padding: 0 20rpx;">
				<view class="change-title">审批代理</view>
			</view>
			<eui-card class="padding-left-28 margin-top-12" leftPadding="28rpx" topMargin="6px" rightPadding="0px"
				vPadding="0px">
				<eui-card-input v-model="Info.c_proxy_name" title="代理人" :placeholder="displayable?'':'请选择代理人'"
					type="text" alignType="left" :rightIconType="displayable?'':'right'"
					@iconClick="clickRight('proxyUser')" displayable hPadding="0" style="padding-right: 10px;" />
				<eui-card-input v-model="Info.c_end_date" title="截止日期" :placeholder="displayable?'':'请选择截止日期'"
					type="date" alignType="left" :displayable="displayable" hPadding="0" style="padding-right: 10px;" />
				<eui-card-input v-model="Info.c_reason" title="代理原因" type="text" alignType="left" displayable
					v-if="displayable" :showBottomLine='false' hPadding="0" style="padding-right: 10px;" />
				<eui-card-input v-model="Info.c_reason" title="代理原因" :placeholder="displayable?'':'请选择代理原因'"
					:range="reasonList" type="radio" alignType="left" :displayable="displayable"
					@buttonClick="buttonClick" :showBottomLine='false' v-else style="padding-right: 10px;"
					hPadding="0" />
			</eui-card>
			<view style="width:100%;height: 20rpx;"></view>
		</scroll-view>
		<view class="user-footer" v-if="!displayable">
			<eui-button type="primary" @click="submitInfo" title="提交" :disabled="displayable" singleTag="primary_主按钮" />
		</view>
	</view>
</template>

<script setup type="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { useMainStore } from '../../../store/modules/store';
	import { useLoginStore } from '../../../store/modules/useLoginStore';
	import service from '../../../common/service';
	import Enjoy from '../../../common/enjoy';
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();

	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight + 'px');
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth);
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.getSystemInfoSync().safeAreaInsets.bottom - 45 + 'px');
	const imgUrl = LoginStore.EnjoyMain.replace('/Enjoy/Service', '');
	const personImg = ref(imgUrl + '/File/DownLoadImage/' + mainStore.loginInfo.sUser);
	const displayable = ref(true);
	const Info = ref({});
	const reasonList = ref([{
		text: "出差",
		value: "出差"
	},{
		text: "繁忙",
		value: "繁忙"
	},{
		text: "请假",
		value: "请假"
	},{
		text: "无",
		value: "无"
	}]);
	const menuRoleList = ref([])

	const setErrorImg = () =>{
		personImg.value =Info.value.c_sex=='男'||Info.value.c_sex=='M'?'/static/img/avatar_male.png':'/static/img/avatar_female.png';
	}

	const onTapLeft = () =>{
		uni.navigateBack();
	}
	const EditUserData = () =>{
		if(displayable.value){
			displayable.value = false;
			scrollHeight.value = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.getSystemInfoSync().safeAreaInsets.bottom - 95 + 'px';
		}else{
			displayable.value = true;
			scrollHeight.value = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.getSystemInfoSync().safeAreaInsets.bottom - 45 + 'px';
		}
	}
	const clickRight = item =>{
		console.log('item',item);
		let parms = Enjoy.GetDialogParms();
		parms.CallBack=SelectionChanged;
		if(item=='store'){
			parms.SelectionType="机构选择";
			parms.SelectedItems = Info.value.sStoreId;
		}else if(item=='adno'){
			parms.SelectionType="部门选择";
			parms.SelectedItems = Info.value.c_adno;
		}else if(item=='proxyUser'){
			parms.SelectionType="人员选择";
			parms.SelectedItems = Info.value.c_proxy_user;
		}
		Enjoy.OpenDialog(parms)
	}
	const SelectionChanged = (e) =>{
		console.log("SelectionChanged: " + JSON.stringify(e));
		if(e.SelectionType=='机构选择'){
			Info.value.sStoreId=e.BackParms.Key;
			Info.value.sStoreName='['+e.BackParms.Key+']'+(e.BackParms.Value?e.BackParms.Value:'');
		}else if(e.SelectionType=='部门选择'){
			Info.value.c_adno=e.BackParms.Key;
			Info.value.c_adno_name='['+e.BackParms.Key+']'+(e.BackParms.Value?e.BackParms.Value:'');
		}else if(e.SelectionType=='人员选择'){
			Info.value.c_proxy_user=e.BackParms.Key;
			Info.value.c_proxy_name='['+e.BackParms.Key+']'+(e.BackParms.Value?e.BackParms.Value:'');
		}
	}
	const buttonClickRole = e =>{
		Info.value.c_menu_role=e.modelValue
	}
	const submitInfo = () =>{
		console.log("Info.value: " + JSON.stringify(Info.value));
		if(Info.value.c_mobile_phone){
			const regMobile = /^1[3456789]\d{9}$/;
			if (!regMobile.test(Info.value.c_mobile_phone)) {
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '您输入的手机号不正确!',
				});
				return false;
			}
		}
		if(Info.value.c_phone){
			const regTel = /^(0?(13[0-9]|15[012356789]|17[0134678]|(16[6])|18[0-9]|(19[7,8,9])|14[5678])[0-9]{8})|(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})(-| )?)?([0-9]{7,8})((-| |转)*([0-9]{1,4}))?$/;
			if (!regTel.test(Info.value.c_phone)) {
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '您输入的固定电话号码不正确!',
				});
				return false;
			}
		}
		if(Info.value.c_email){
			const regEmail = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
			if (!regEmail.test(Info.value.c_email)) {
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '您输入的邮箱格式不正确!',
				});
				return false;
			}
		}
		if(Info.value.c_address&&Info.value.c_address.length>150){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: '您输入的地址超长!',
			});
			return false;
		}
		if(Info.value.c_proxy_user&&!Info.value.c_end_date){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: '请选择截止日期!',
			});
			return false;
		}
		if(Info.value.c_proxy_user&&!Info.value.c_reason){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: '请选择代理原因!',
			});
			return false;
		}
		uni.showModal({
			title: ' 提示',
			content: '请确认，是否保存?',
			showCancel: true,
			success: (res) => {
				if (res.confirm) {
					HandleUpdate()
				}
			}
		});
	}
	const HandleUpdate = () =>{
		service.enjoyShowLoading('正在保存...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40主页",
		        ObjectData: {
					userno: mainStore.loginInfo.sUser,
					mobilephone: Info.value.c_mobile_phone?Info.value.c_mobile_phone:'',
					phone: Info.value.c_phone?Info.value.c_phone:'',
					email: Info.value.c_email?Info.value.c_email:'',
					sCfgValue: "",
				    sStoreId: Info.value.sStoreId?Info.value.sStoreId:'',
			        sAdno: Info.value.c_adno?Info.value.c_adno:'',
					sMenuRole: Info.value.c_menu_role?Info.value.c_menu_role:'',
					sReason: Info.value.c_reason?Info.value.c_reason:'',
					sProxyUser: Info.value.c_proxy_user?Info.value.c_proxy_user:'',
					endDate: Info.value.c_end_date?Info.value.c_end_date:'',
					address: Info.value.c_address ? Info.value.c_address:''
				},
		        MethodName: "Update",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					console.log("ObjectData: " + JSON.stringify(ObjectData));
					displayable.value = true;
					scrollHeight.value = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.getSystemInfoSync().safeAreaInsets.bottom - 45 + 'px';
					uni.showToast({
						duration: 3500,
						icon: 'none',
						title: '保存成功!',
					});
					getCurrentPages();
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const getCurrentPages = () =>{
		setTimeout(() => {
			try {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.GetMyInfoList();
			} catch (e) {
				//TODO handle the exception
			}
		}, 500)
	}
	const buttonClick = (e) =>{
		console.log("e: " + JSON.stringify(e));
		Info.value.c_reason=e.modelValue
	}
	const GetMenuRolueList = ()=>{
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40主页",
		        ObjectData: mainStore.loginInfo.sUser,//mainStore.loginInfo.sUser,
		        MethodName: "GetMenuRolueList",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					for (let i = 0; i < ObjectData.length; i++) {
						menuRoleList.value.push({
							text: ObjectData[i].c_name,
							value: ObjectData[i].c_name
						})
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
		}, () => {
		    console.log('失败')
		});
	}
	const GetAngentInfo =()=>{
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40主页",
		        ObjectData:mainStore.loginInfo.sUser,//mainStore.loginInfo.sUser,
		        MethodName: "GetAngentInfo",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					if(ObjectData.length>0){
						Info.value = {
							...Info.value,
							c_proxy_user:ObjectData[0].c_name,
							c_proxy_name:ObjectData[0].c_name?('['+ObjectData[0].c_name+']'+(ObjectData[0].proName?ObjectData[0].proName:'')):'',
							c_end_date:ObjectData[0].c_comment,
							c_reason:ObjectData[0].c_value,
						};
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
		}, () => {
		    console.log('失败')
		});
	}
	const GetMenuRole = ()=>{
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40主页",
		        ObjectData: mainStore.loginInfo.sUser,//mainStore.loginInfo.sUser,
		        MethodName: "GetMenuRole",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					if(ObjectData.length>0){
						Info.value = {
							...Info.value,
							sStoreId:ObjectData[0].sStoreId,
							sStoreName:ObjectData[0].sStoreId?('['+ObjectData[0].sStoreId+']'+(ObjectData[0].c_store_name?ObjectData[0].c_store_name:'')):'',
							c_adno:ObjectData[0].sAdno,
							c_adno_name:ObjectData[0].sAdno?('['+ObjectData[0].sAdno+']'+(ObjectData[0].c_org_name?ObjectData[0].c_org_name:'')):'',
							c_menu_role:ObjectData[0].sMenuRole,
						};
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
				GetAngentInfo();
		    }
		}, () => {
		    console.log('失败')
		});
	}
	const GetMyInfoList = ()=>{
		service.enjoyShowLoading('正在加载...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40主页",
		        ObjectData: mainStore.loginInfo.sUser,//mainStore.loginInfo.sUser, 00000010
		        MethodName: "GetMyInfoList",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					if(ObjectData.length>0){
						Info.value = {
							...Info.value,
							...ObjectData[0],
						};
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
				GetMenuRole();
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	onLoad(()=>{
		GetMenuRolueList();
		GetMyInfoList();
	})
</script>

<style lang="scss">
	.iconfont {
		font-size: 20px;
		width: 40px;
		height: 100%;
		text-align: center;
		line-height: 37px;
		@include themeText("themeText");
	}

	.flex {
		display: flex;
	}

	.justify-content-space-between {
		justify-content: space-between !important;
	}

	.justify-content-flex-end {
		justify-content: flex-end;
	}

	.padding-left-28 {
		padding-left: 28rpx !important;
	}

	.header-content {
		height: 88rpx;
		padding: 0 6px;
		background-color: #fff;
		align-items: center;
	}

	.user-img {
		background-color: #fff;
		height: 282rpx;
		width: 100%;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
	}

	.margin-top-40 {
		margin-top: 40rpx;
	}

	.margin-top-20 {
		margin-top: 20rpx;
	}

	.font-size-36 {
		font-size: 36rpx;
	}

	.change-title {
		color: rgba(136, 136, 136, 1);
		font-size: 26rpx;
		padding: 20rpx 0 0 0;
	}

	.user-footer {
		position: fixed;
		z-index: 9;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.padding-top-12 {
		padding-top: 12rpx;
	}

	.margin-top-12 {
		margin-top: 12rpx !important;
	}

	.m-card-input-view {
		display: flex;
		flex-direction: row;
		width: 100%;
		box-sizing: border-box;
	}

	.m-card-input-title {
		width: 185rpx;
		height: 40rpx;
	}

	.m-title-text {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.ellipsis-2 {
		display: -webkit-box;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>